<template>
  <div style="height: 568px">
    <div class="flex-row-start-start" style="width: 94.99%">
      <div style="width: 90%" class="flex-row-start-center">
        <Select
            v-model="kqName"
            style="width: calc(12.5% - 10px); margin-right: 10px"
            placeholder="库区名称"
            size="large"
            clearable
            @on-change="selKqName"
        >
          <Option v-for="item in kqNameList" :key="item" :value="item">{{
              item
            }}</Option>
        </Select>
        <Select
            v-model="zrdName"
            style="width: calc(13.09% - 10px); margin-right: 10px"
            placeholder="注入点名称"
            size="large"
            clearable
        >
          <Option v-for="item in jzNameList" :key="item" :value="item">{{
              item
            }}</Option>
        </Select>
      </div>
      <div style="width: 10%" class="flex-row-end-center">
        <Button type="error" @click="onQuery">查询</Button>
      </div>
    </div>
    <div style="margin-top: 20px" class="flex-row-start-start">
      <div style="width: 95%">
        <Table :columns="columns" :data="tableData">
          <template slot="action" slot-scope="{ row, index }">
            <div class="flex-row-start-start">
              <Icon
                type="md-create"
                size="20"
                @click="updateItem(row, index)"
                class="hover-icon"
              ></Icon>
              <Icon
                type="md-trash"
                size="20"
                style="margin-left: 5px"
                class="hover-icon"
                @click="deleteItem(row, index)"
              ></Icon>
            </div>
          </template>
        </Table>
        <div
            class="flex-row-end-center"
            style="margin-top: 10px"
            v-if="totalLen > 10"
        >
          <Page
              :total="totalLen"
              :page-size="pageSize"
              show-total
              @on-change="changepage"
          />
        </div>
      </div>
      <div style="margin-left: 35px; width: 5.01%">
        <div style="width: 5.01%">
          <div class="flex-row-center-center">
            <Button
                style="width: 65px; margin-top: 10px"
                class="flex-row-center-center"
                @click="importExcel"
            >批量导入</Button
            >
            <input
                type="file"
                ref="uploadExcel"
                v-show="false"
                accept=".xls,.xlsx"
                @change="readExcel($event)"
            />
          </div>
        </div>
      </div>
    </div>
    <Modal v-model="showModal" width="40" @on-ok="submitUpdate">
      <p slot="header">{{ selectItem.kqName }}信息详情</p>
      <div>
        <div class="flex-row-start-center" style="height: 32px">
          <div class="modal-title flex-row-end-center">
            <span>库区名称:</span>
          </div>
          <div class="modal-value">{{ selectItem.kqName }}</div>
        </div>
        <div class="flex-row-start-center" style="height: 32px">
          <div class="modal-title flex-row-end-center">
            <span>注入点名称:</span>
          </div>
          <div class="modal-value">{{ selectItem.name }}</div>
        </div>
        <div class="flex-row-start-center" style="height: 32px">
          <div class="modal-title flex-row-end-center">
            <span>注入点坐标:</span>
          </div>
          <Input class="modal-value" v-model="location" size="large" />
        </div>
      </div>
    </Modal>
    <Modal v-model="showDelete" style="width: 200px" @on-ok="submitDelete">
      <p slot="header">删除警告</p>
      <div class="flex-row-center-center warning">确定删除么？</div>
    </Modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arrList: [],
      curPage: 0,
      showDelete: false,
      showModal: false,
      itemkqArea: "",
      selectId: "",
      selectItem: {},
      showKq: true,
      kqId: "",
      kqName: "",
      kqArea: "",
      kqState: "",
      startTime: "",
      kqIdList: [],
      kqNameList: [],
      kqAreaList: [],
      kqStateList: ["正常", "异常"],
      startTimeList: [],
      pageSize: 10,
      tableData: [],
      columns: [
        { title: "库区名称", key: "kqName" },
        { title: "注入点名称", key: "name" },
        { title: "注入点坐标", key: "location" },
        { title: "操作", key: "action", slot: "action" },
      ],
      zrdName: "",
      jzNameList: []
    };
  },
  props: {
    kqInfoList: Array,
    totalLen: Number,
  },
  watch: {
    kqInfoList(val) {
      let it = this;
      this.curPage = 0;
      this.tableData = val.slice(0, this.pageSize);
      it.kqIdList = [];
      it.kqNameList = [];
      it.kqAreaList = [];
      it.startTime = "";
      val.forEach((item) => {
        if (it.kqInfoList.indexOf(item.kqId) < 0) {
          it.kqIdList.push(item.kqId);
        }
        if (it.kqNameList.indexOf(item.kqName) < 0) {
          it.kqNameList.push(item.kqName);
        }
        if (it.kqAreaList.indexOf(item.kqArea) < 0) {
          it.kqAreaList.push(item.kqArea);
        }
      });
      it.query();
    },
  },

  methods: {
    selKqName(event){
      this.getJzNameList()
    },
    getJzNameList(){
      let param={kqName:this.kqName};
      this.$axios
          .post("/getJzNameList", param, {
            headers: { "Content-Type": "application/json;charset=UTF-8" },
          })
          .then((response) => {
            if(response.data!=null)
            {
              this.jzNameList=response.data;
              console.log("jzNameList----", this.jzNameList)

            }
          })
          .catch((error) => {});
    },
    importExcel() {
      this.$refs.uploadExcel.click();
    },
    readExcel(e) {
      this.arrList = [];
      const files = e.target.files;
      if (files.length <= 0) {
        //如果没有文件名
        return false;
      }
      const fileReader = new FileReader();
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;
          const workbook = this.XLSX.read(data, {
            type: "binary",
          });

          const wsname = workbook.SheetNames[0]; //取第一张表
          const ws = this.XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //获取到XLSX表格中的数据,并生成json格式的数据类型
          let arr = [];
          ws.forEach((item) => {
            arr.push({
              kqName: item["库区"],
              zrdName: item["所属井组"],
              location: item["坐标"]
            });
          });

          this.postData(arr);
        } catch (e) {
          return false;
        }
      };
      fileReader.readAsBinaryString(files[0]);
    },
    postData(data) {
      this.$axios.post("zrd/import", data).then((res) => {
        if (res.status === 200) {
          alert("导入成功");
        } else {
          alert("导入失败");
        }
      });

    },
    deleteItem(row, index) {
      this.selectId = index;
      this.selectItem = row;
      this.showDelete = true;
    },
    submitDelete() {
      let param = {};
      let it = this;
      this.$axios.post(
        "/zrd/deleteById/" + this.selectItem.id
        )
        .then((res) => {
          if (res.data) {
            alert("已删除");
            let o = {};
            if (it.kqId == "" || it.kqId == undefined) {
              it.kqId = "";
            }
            if (it.kqName == "" || it.kqName == undefined) {
              it.kqName = "";
            }
            if (it.kqState == "" || it.kqState == undefined) {
              it.kqState = "";
            }
            if (it.kqArea == "" || it.kqArea == undefined) {
              it.kqArea = "";
            }
            if (it.startTime == "" || it.startTime == undefined) {
              it.startTime = "";
            }
            o.kqId = it.kqId;
            o.kqName = it.kqName;
            o.kqState = it.kqState;
            o.kqArea = it.kqArea;
            o.startTime = it.startTime;

            if (res.data <= this.pageSize * this.curPage && res.data > 0) {
              o.page = this.curPage - 2;
            } else {
              o.page = this.curPage - 1;
            }
            this.$emit("update-kqInfo", o);
          } else {
            alert("删除失败");
          }
        })
        .catch((error) => {});
    },
    updateItem(item, id) {
      this.selectId = id;
      this.location = item.location;
      this.selectItem = item;
      this.showModal = true;
    },
    submitUpdate() {
      let param = {};
      param.id = this.selectItem.id;
      param.location = this.location;
      this.$axios
        .post("/zrd/updateById", param)
        .then((res) => {
          if (res.data) {
            alert("修改成功");
            this.showModal = false;
            this.$emit("update-kqInfo", this.curPage);
          } else {
            alert("修改失败");
          }
        })
        .catch((error) => {});
    },
    changeTime(val) {
      this.startTime = val;
    },
    swicthAdd() {
      this.$emit("switch-to-add", false);
    },
    changepage(index) {
      this.curPage = index;
      let it = this;
      let o = {};
      if (it.kqId == "" || it.kqId == undefined) {
        it.kqId = "";
      }
      if (it.kqName == "" || it.kqName == undefined) {
        it.kqName = "";
      }
      if (it.kqState == "" || it.kqState == undefined) {
        it.kqState = "";
      }
      if (it.kqArea == "" || it.kqArea == undefined) {
        it.kqArea = "";
      }
      if (it.startTime == "" || it.startTime == undefined) {
        it.startTime = "";
      }
      o.kqId = it.kqId;
      o.kqName = it.kqName;
      o.kqState = it.kqState;
      o.kqArea = it.kqArea;
      o.startTime = it.startTime;
      o.page = index - 1;
      this.$emit("change-to-page", o);
    },
    onQuery() {
      let it = this;
      let o = {};
      if (it.kqId == "" || it.kqId == undefined) {
        it.kqId = "";
      }
      if (it.kqName == "" || it.kqName == undefined) {
        it.kqName = "";
      }
      if (it.kqState == "" || it.kqState == undefined) {
        it.kqState = "";
      }
      if (it.kqArea == "" || it.kqArea == undefined) {
        it.kqArea = "";
      }
      if (it.startTime == "" || it.startTime == undefined) {
        it.startTime = "";
      }
      o.kqId = it.kqId;
      o.kqName = it.kqName;
      o.zrdName = it.zrdName;
      o.kqState = it.kqState;
      o.kqArea = it.kqArea;
      o.startTime = it.startTime;
      o.page = 0;
      this.$emit("change-to-page", o);
    },
    query() {
      let data = [];
      let it = this;
      if (
        !(
          (it.kqId == "" || it.kqId == undefined) &&
          (it.kqName == "" || it.kqName == undefined) &&
          (it.kqState == "" || it.kqState == undefined) &&
          (it.kqArea == "" || it.kqArea == undefined) &&
          (it.startTime == "" || it.startTime == undefined)
        )
      ) {
        data = this.kqInfoList.filter(function (item) {
          return (
            (it.kqId != "" && it.kqId != undefined
              ? item.kqId == it.kqId
              : true) &&
            (it.kqName != "" && it.kqName != undefined
              ? item.kqName == it.kqName
              : true) &&
            (it.kqState != "" && it.kqState != undefined
              ? item.kqState == it.kqState
              : true) &&
            (it.kqArea != "" && it.kqArea != undefined
              ? item.kqArea == it.kqArea
              : true) &&
            (it.startTime != "" && it.startTime != undefined
              ? item.startTime == it.startTime
              : true)
          );
        });
        this.tableData = data.slice(0, this.pageSize);
      } else {
        this.tableData = this.kqInfoList.slice(0, this.pageSize);
      }
    },
  },
  mounted() {
    this.getJzNameList();
    // let it = this;
    // this.kqInfoList.forEach((item) => {
    //   it.kqIdList.push(item.kqId);
    //   it.kqNameList.push(item.kqName);
    //   it.kqAreaList.push(item.kqArea);
    // });
  },
};
</script>
<style scoped>
.test-style {
  color: black;
  font-size: 18px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
  width: calc(12.5% - 20px);
  margin-right: 10px;
  margin-left: 10px;
}
.modal-title {
  width: 25%;
  margin-right: 5%;
  font-size: 16px;
  font-weight: 600;
}
.modal-value {
  width: 40%;
  font-size: 16px;
}
.hover-icon:hover {
  cursor: pointer;
}
.warning {
  height: 60px;
  font-size: 20px;
  font-weight: 600;
}
</style>